<template>
	<view class="nav_bar_wrap">
		<view class="status_bar" :style="{ height: statusBarHeight }"></view>
		<view class="nav_bar" :style="navStyles">
			<view class="nav_before"><slot name="before"></slot></view>
			<view class="nav_middle">
				<lg-ntext class="title-txt" :txt="title"  ></lg-ntext>
				<slot v-if="title === ''" name="middle"></slot>
			</view>
			<view class="nav_after"><slot name="after"></slot></view>
			<slot></slot>
		</view>
	</view>
</template>
<script>
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
	props: {
		title: {
			type: String,
			default: 'title'
		},
		border: {
			type: Boolean
		}
	},
	data() {
		return {
			statusBarHeight
		};
	},
	computed: {
		navStyles() {
			let style = {},
			    _border = this.border;

			if (_border) {
				style['border-bottom-width'] = '1';
				style['border-bottom-color'] = '#e4e7ed';
				style['border-bottom-style'] = 'solid';
			}

			return style;
		}
	}
};
</script>
<style lang="scss" scoped>
$nav-height: 44px;
$nav-border-color: #e4e7ed;
.nav_bar {

	height: $nav-height;

	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.status_bar,
.nav_bar {
	background-color: #fff;
}

.nav_before,
.nav_middle,
.nav_after {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}
.title-txt{
	
	font-size: 38rpx;
	font-weight: bold;
}
</style>
